<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <navbar title="用户修改" @back="resetForm"/>
    <div class="form_box">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="max-width: 700px"
      >
        <a-form-model-item ref="name" label="用户名称" prop="name">
          <a-input
            v-model="form.name"
            placeholder="请输入用户名称"
            @blur="
              () => {
                $refs.name.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item label="所属企业" prop="enterprise_id">
          <a-select
            v-model="enterprisesName"
            show-search
            placeholder="选择企业"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch($event,'enterprises')"
            @change="handleChange"
          >
          <a-select-option v-for="d in enterprises" :key="d.id">
            {{ d.name }}
          </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="角色权限" prop="role_id">
          <a-select
            v-model="rolesName"
            show-search
            placeholder="请选择角色权限"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch($event,'roles')"
            @change="handleChange2"
          >
          <a-select-option v-for="d in roles" :key="d.id">
            {{ d.name }}
          </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="账号电话" prop="mobile">
          <a-input v-model="form.mobile" placeholder="请输入账号电话" />
        </a-form-model-item>
        <a-form-model-item label="账号密码">
          <a-input v-model="form.password" placeholder="请输入账号密码,新增必填" />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input
            v-model="form.remarks"
            type="textarea"
            :autoSize="{ minRows: 4, maxRows: 6 }"
          />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="resetForm"> 取消 </a-button>
          <a-button style="margin-left: 10px" type="primary" @click="onSubmit">
            保存
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {get,gets,updata,add} from "@/services"
var _this;
export default {
  name: "Demo",
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {},
      enterprises:[],
      enterprisesName:'',
      roles:[],
      rolesName:'',
      rules: {
        name: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
        ],
        role_id: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change",
          },
        ],
        enterprise_id:[
          {
            required: true,
            message: "请选择企业",
            trigger: "change",
          },
        ],
        mobile:[
          {
            required: true,
            message: "请输入账号电话",
            trigger: "blur",
          },
        ]
      },
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created(){
    _this = this
    this.handleSearch('','roles')
    this.handleSearch('','enterprises')
    let id = this.$route.query.id;
    if (!id) {
      return;
    }
    get(id,'users').then(({data})=>{
      if(data.code==20000){
        let res = data.data
         _this.form = {
          name:res.name,
          remarks:res.remarks,
          mobile:res.mobile,
          id:res.id
        }
        try {
          _this.rolesName = res.roles[0].name
          _this.form.role_id = res.roles[0].id
        } catch (error) {
          //error
        }
        try {
          _this.enterprisesName=res.enterprises[0].name
          _this.form.enterprise_id = res.enterprises[0].id
        } catch (error) {
        }
       
      }
    })
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
            let form = JSON.parse(JSON.stringify(_this.form))
            let fun =form.id?updata:add
            if(form.password){
                form.password_confirmation=form.password
            }
          fun(form,'users').then(({ data }) => {
            if (data.code == 20000) {
              _this.resetForm();
            } else {
              _this.$message.error(data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange(value) {
      this.form.enterprise_id = value
    },
    handleChange2(value) {
      this.form.role_id = value
    },
    handleSearch(txt,thisName){
      console.log(txt,thisName);
      let search = {
        search:txt,
        searchFields:'name:like'
      }
      gets(search,thisName).then(({data})=>{
        if(data.code==20000){
          _this[thisName] = data.data.data
        }
      })
    },
    resetForm() {
      this.$router.push('/user?t=2')
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  border-radius: 4px;
  .form_box {
    padding: 24px;
  }
}
</style>